<div th:remove="tag">
	
	<!-- Active facets -->
	<div th:each="facetDto : ${facets}" th:if="${facetDto.active}" class="section">
		<h3>
			<span th:text="${facetDto.facet.label}" th:remove="tag"></span>
			<a th:if="${facetDto.facet.canMultiselect}" 
				th:attr="onclick=${'HC.showFacetMultiselect(''__${facetDto.facet.field.abbreviation}__'')'}"
				href="javascript:;" 
				class="remove_facet_values">[ Edit ]</a>
			<a blc:removefacetvalueslink="${facetDto}" class="remove_facet_values">[ Clear ]</a>
		</h3>
		
		<li th:each="facetValue : ${facetDto.facetValues}" th:if="${facetValue.active}">
			<!-- Facet Value display fragment -->
			<span th:remove="tag" th:fragment="facet-value-display">
				<span th:if="${facetValue.value != null}" th:remove="tag" th:text="${facetValue.value}"></span>
				<span th:unless="${facetValue.value != null}" th:remove="tag">
					<span blc:price="${facetValue.minValue}" th:remove="tag"></span>
					<span th:text="${facetValue.maxValue == null ? ' or more' : ' - '}" th:remove="tag"></span>
					<span th:if="${facetValue.maxValue != null}" blc:price="${facetValue.maxValue}" th:remove="tag"></span>
				</span>
			</span>
		</li>
	</div>
	
	<!-- Inactive facets -->
	<div th:each="facetDto : ${facets}" th:unless="${facetDto.active}" class="section">
		<h3 th:text="${facetDto.facet.label}"></h3>
		<ul>
			<li th:each="facetValue : ${facetDto.facetValues}" th:class="${facetValue.active}? 'active'" th:if="${!facetDto.showQuantity or facetValue.quantity > 0}">
				<a blc:togglefacetlink="${facetValue}" class="maker">
					
					<span th:substituteby="catalog/partials/facetFilter :: facet-value-display" />
				
					<span class="facetCount" th:if="${facetDto.showQuantity and !facetDto.active}" th:text="${facetValue.quantity}"></span>
	                <i th:if="${facetValue.active}" class="icon-remove"></i>
				</a>
			</li>
			<li>
				<a th:if="${facetDto.facet.canMultiselect}" 
					th:attr="onclick=${'HC.showFacetMultiselect(''__${facetDto.facet.field.abbreviation}__'')'}"
					href="javascript:;" 
					class="maker multiple">Choose Multiple...</a>
			</li>
		</ul>
	</div>
	
	<!-- Multiselect facets -->
	<div th:each="facetDto : ${facets}" th:if="${facetDto.facet.canMultiselect}">
		<div th:id="${'facet-' + facetDto.facet.field.abbreviation}" style="display: none;" class="multiselect_facet_container">
			<h3 th:text="${facetDto.facet.label}"></h3>
			<blc:form method="GET">
				<li th:each="facetValue : ${facetDto.facetValues}" th:if="${facetDto.active or (!facetDto.showQuantity or facetValue.quantity > 0)}">
					<input type="checkbox" 
						th:name="${facetDto.facet.field.abbreviation + '-' + facetValue.valueKey}" 
						th:id="${facetDto.facet.field.abbreviation + '-' + facetValue.valueKey}" 
						th:checked="${facetValue.active}" />
						
					<label th:for="${facetDto.facet.field.abbreviation + '-' + facetValue.valueKey}">
						<span th:substituteby="catalog/partials/facetFilter :: facet-value-display" />
					</label>
				</li>
				
				<div th:each="facetDto2 : ${facets}" th:remove="tag">
					<input type="hidden" 
						th:each="facetValue : ${facetDto2.facetValues}" 
						th:if="${facetValue.active}" 
						th:name="${facetDto2.facet.field.abbreviation}" 
						th:value="${facetValue.valueKey}" />
				</div>
				<input type="hidden" th:if="${originalQuery}" name="q" th:value="${originalQuery}" />
				<input type="hidden" name="facetField" th:value="${facetDto.facet.field.abbreviation}" />
				<input type="submit" class="medium red" />
			</blc:form>
		</div>
	</div>
</div>